<template>
  <div class="sj-form">
    <stepBar length=60></stepBar>
    <div class="form-main">
      <ul class="select-last ">
        <li class="input-box flex-box">
          <div><p>样本类型</p>
            <div class="select-btn">
              <p @click="showPicker0">{{formbData.yangbenLX.value}}<span v-if="formbData.yangbenLX.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>采样日期</p>
            <div class="select-btn">
              <p @click="showPicker3">{{formbData.caiyangRQ.value}}<span v-if="formbData.caiyangRQ.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>送检单位</p>
            <div class="select-btn">
              <p @click="showPicker1">{{formbData.songjianDW.value}}<span v-if="formbData.songjianDW.value ==='请选择'"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-jiantou"></use></svg></span></p>
            </div>
          </div>
        </li>
        <li class="input-box flex-box">
          <div><p>送检日期</p>
            <div class="select-btn">
              <p @click="showPicker4">{{formbData.songjianRQ.value}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="fixed-form-foot">
      <div class="form-foot">
        <div class="form-foot-main">
          <router-link to="/shaoma"><button class="pre-page">上一步</button></router-link>
          <button class="next-page" @click="formbSubmit">下一步</button>
        </div>
      </div>
    </div>
    <awesome-picker
      ref="picker0"
      :textTitle="picker0.textTitle"
      :data="picker0.data"
      :anchor="picker0.anchor"
      @confirm="handlePicker0Confirm">
    </awesome-picker>
    <awesome-picker
      ref="picker1"
      :textTitle="picker1.textTitle"
      :data="picker1.data"
      :anchor="picker1.anchor"
      @confirm="handlePicker1Confirm">
    </awesome-picker>
    <awesome-picker
      ref="picker3"
      :textTitle="picker3.textTitle"
      :type="picker3.type"
      :anchor="picker3.anchor"
      @confirm="handlePicker3Confirm($event,pickerNum)">
    </awesome-picker>
  </div>
</template>
<script>
import Vue from 'vue'
import stepBar from '@/quanjiyin/components/StepBar.vue'
import AwesomePicker from 'vue-awesome-picker'
Vue.use(AwesomePicker)

const data0 = ['口腔拭子', '干血片', '外周血', '唾液']
const data1 = ['互联网业务部']
const STORAGE_KEY = 'formbMsg'
export default {
  data() {
    return {
      dataLists: '',
      sampleTypeList: [
        {
          key: 'S067',
          value: '口腔拭子'
        },
        {
          key: 'S050',
          value: '干血片'
        },
        {
          key: 'S060',
          value: '外周血'
        },
        {
          key: 'S079',
          value: '唾液'
        }
      ],
      pickerNum: 3,
      showConditionA: false,
      showConditionB: false,
      showConditionC: false,
      formbData: {
        yangbenLX: {
          key: '样本类型',
          value: '请选择'
        },
        caiyangRQ: {
          key: '采样日期',
          value: '请选择'
        },
        songjianDW: {
          key: '送检单位',
          value: '请选择'
        },
        songjianRQ: {
          key: '送检日期',
          value: '选填'
        },
        customerCode: 'CH17887',
        sampleType: ''
      },
      value: null,
      picker0: {
        anchor: [],
        textTitle: '',
        data: [data0]
      },
      picker1: {
        anchor: [],
        textTitle: '',
        data: [data1]
      },
      picker3: {
        anchor: [],
        textTitle: '',
        type: 'date'
      },
      // selectedJcLists: [],
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    }
  },
  components: {
    stepBar
  },
  computed: {},
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists)
      },
      deep: true
    }
  },
  methods: {
    showPicker0() {
      this.$refs.picker0.show()
    },
    handlePicker0Confirm(v) {
      let index = v[0].index
      this.formbData.sampleType = this.sampleTypeList[index].key
      this.formbData.yangbenLX.value = v[0].value
    },
    showPicker1() {
      this.$refs.picker1.show()
    },
    handlePicker1Confirm(v) {
      // let index = v[0].index
      // this.formbData.customerCode = this.dataLists[index].customerCode
      this.formbData.songjianDW.value = v[0].value
    },
    showPicker3() {
      this.$refs.picker3.show()
      this.pickerNum = 3
    },
    showPicker4() {
      this.$refs.picker3.show()
      this.pickerNum = 4
    },
    handlePicker3Confirm(v, a) {
      // console.log(v,a);
      if (a === 3) {
        this.formbData.caiyangRQ.value = v[0].value + '' + v[1].value + '' + v[2].value
      } else if (a === 4) {
        this.formbData.songjianRQ.value = v[0].value + '' + v[1].value + '' + v[2].value
      }
    },
    // arrFilter(arr) {
    //   this.selectedJcLists = [];
    //   for (let i in arr) {
    //     if (arr[i] != "选填") {
    //       this.selectedJcLists.push(arr[i]);
    //     }
    //   }
    // },
    formbSubmit() {
      if (this.formbData.yangbenLX.value === '请选择') {
        this.$layer.open({
          content: '请选择样本类型',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formbData.caiyangRQ.value === '请选择') {
        this.$layer.open({
          content: '请选择采样日期',
          skin: 'msg',
          time: 2
        })
        return false
      } else if (this.formbData.songjianDW.value === '请选择') {
        this.$layer.open({
          content: '请选择送检单位',
          skin: 'msg',
          time: 2
        })
        return false
      } else {
        // this.arrFilter(this.formbData);
        window.localStorage.removeItem('formbMsg')
        setTimeout(() => {
          this.storageLists = this.formbData
        }, 0)
        // console.log(this.selectedJcLists);
        // console.log(this.formbData.songjianRQ);
        // console.log(window.localStorage);
        setTimeout(() => {
          console.log(this.$localStorage.fetch(STORAGE_KEY))
          this.$router.push('/sjformc')
        }, 10)
      }
    }
  },
  mounted() {
    // this.$axios
    //   .get(
    //     this.$API.api + '/report/?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=getCustomerInfo'
    //   )
    //   .then(res => {
    //     console.log(res)
    //     this.dataLists = res.data
    //     // console.log(this.dataLists);
    //     data1.length = 0
    //     for (let i in res.data) {
    //       data1.push(res.data[i].customerName)
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
    // window.localStorage.removeItem("formbMsg");
    this.formbData = window.localStorage.formbMsg
      ? JSON.parse(window.localStorage.formbMsg)
      : this.formbData
  }
}
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: r(70);
  box-sizing: border-box;
  .fixed-form-foot {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
</style>
